<template>
    <div>
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <div class="pa10 bfff mt-10">
            <div class="fcb pl-20 pr-20 pt-20 pb-15 bbs">
                <input class="input phone" type="text" placeholder="请输入手机号" v-model="phone">
                <span class="c666 f14" @click="getCode">获取验证码</span>
            </div>
            <div class="pl-20 pr-20 pt-15 pb-15 bbs">
                <input class="input" type="text" placeholder="请输入验证码" v-model="smsCode">
            </div>

            <div class="fcc">
                <van-button class="warning" type="warning" @click="login">立即登录</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs, Icon, NavBar, Button } from 'vant';
import request from '../../utils/request'

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Button)

export default {
    data() {
        return {
            phone: 18376010720,
            smsCode: '',
        };
    },
    methods: {
        getCode() {
            let params = {
                phone: this.phone
            }
            request.get('/user/getSmsCode',{params}).then(res => {
                this.smsCode = res.smsCode
            })
        },
        login() {
            let data = {
                phone: this.phone,
                smsCode: this.smsCode
            }
            request.post('/user/login',data).then(res => {
                this.$store.commit('set_phone',this.phone);
                this.$store.commit('set_token',res.result.token)
                this.$router.push('/my')
            })
        }
    },
};
</script>

<style scoped>
.bbs {
    border-bottom: 1px solid #d6d6d6;
}

.warning {
    margin-top: 30px;
    height: 40px;
    width: 70%;
}

.input {
    width: 70%;
    border: none;
}
</style>